import React, { useState } from 'react';
import {
  Form,
  Input,
  Checkbox,
  DatePicker,
  Select,
  Upload,
  Radio,
  message,
  Button,
} from 'antd';
import './secondStep.less';
import {
  LoadingOutlined,
  PlusOutlined,
  MinusCircleOutlined,
  CloseCircleOutlined,
  CaretRightOutlined,
  CaretUpOutlined,
  DeleteOutlined,
  UploadOutlined,
} from '@ant-design/icons';
export default function (props) {
  const { RangePicker } = DatePicker;
  const { Option } = Select;
  const [imageUrl, setImageUrl] = useState('');
  const [loading, setLoding] = useState(false);
  const [plainOption, setPlainOption] = useState([
    '产品',
    'UI',
    '技术',
    '测试',
  ]);
  const [plainOptions, setPlainOptions] = useState(['离岸', '人员', '外包']);
  const [value1, setValue1] = useState('');
  const [secondForm] = Form.useForm();
  const moment = require('moment');

  const handleChange = (info) => {
    if (info.file.status === 'uploading') {
      setLoding(true);
      return;
    }
    if (info.file.status === 'done') {
      getBase64(info.file.originFileObj, (imageUrl) => {
        setLoding(false);
        setImageUrl(imageUrl);
      });
    }
  };

  const lastClick = () => {
    let a = secondClick();
    props.nextClick({ step: 1, data: a });
  };
  const saveClick = () => {
    secondForm.validateFields().then(() => {
      let a = secondClick();
      props.nextClick({ step: 3, data: a });
    });
  };
  const secondClick = () => {
    let a = {};
    const { functionary, itemAmount, serverType, serviceContent, startTime } =
      secondForm.getFieldValue();
    a.functionary = functionary;
    a.itemAmount = itemAmount;
    a.serverType = serverType;
    a.serviceContent = serviceContent;
    a.startTime = moment(startTime).format('YYYY-MM-DD');
    return a;
  };
  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  const onChange1 = (e) => {
    // console.log('radio1 checked', e.target.value);
    setValue1(e.target.value);
  };

  const props1 = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <div>
      <div className="project-all">
        <div className="circle">1</div>
        <div className="wire"></div>
        <div className="circle">2</div>
        <div className="wire"></div>
        <div className="circle1">3</div>
      </div>
      <div className="first-text">
        <div>项目详细信息</div>
      </div>
      <div className="first-item">
        <Form
          form={secondForm}
          name="basic"
          autoComplete="off"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
        >
          <Form.Item
            label="项目负责人"
            name="functionary"
            rules={[
              {
                required: true,
                message: '请选择',
              },
            ]}
          >
            <Select
              style={{ width: '400px' }}
              showSearch
              placeholder="Select a person"
              optionFilterProp="children"
              //   onChange={onChange}
              //   onSearch={onSearch}
              filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
              <Option value="tom">Tom</Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="开始时间"
            name="startTime"
            rules={[
              {
                required: true,
                message: '请输入开始时间',
              },
            ]}
          >
            <DatePicker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择开始时间"
              style={{ width: '400px' }}
            />
          </Form.Item>
          <Form.Item name="operationTime" label="项目周期">
            <RangePicker
              showTime
              format="YYYY-MM-DD HH:mm:ss"
              style={{ width: '400px' }}
            />
          </Form.Item>

          <Form.Item
            label="项目图"
            name="activityImg"
            // 以下两条是必须的
            valuePropName="fileList"
            // 如果没有下面这一句会报错
            getValueFromEvent={normFile}
          >
            <Upload
              name="multipartFile"
              listType="picture-card"
              className="avatar-uploader"
              showUploadList={false}
              action="/campus/campusweb/upload/pictureUpload"
              onChange={handleChange}
            >
              {imageUrl ? (
                <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
              ) : (
                <div>
                  {loading ? <LoadingOutlined /> : <PlusOutlined />}
                  <div style={{ marginTop: 8 }}>Upload</div>
                </div>
              )}
            </Upload>
          </Form.Item>

          <Form.Item label="项目金额" name="itemAmount">
            <Input style={{ width: '400px' }} />
          </Form.Item>
          <Form.Item name="activityContent" label="活动内容">
            <Input.TextArea
              showCount
              maxLength={100}
              style={{ width: '400px' }}
            />
          </Form.Item>
          <Form.Item
            name="serviceContent"
            label="服务内容"
            rules={[
              {
                required: true,
                message: '请选择',
              },
            ]}
          >
            <Checkbox.Group
              options={plainOption}
              //   onChange={onChange}
            />
          </Form.Item>
          <Form.Item
            name="serverType"
            label="服务类型"
            rules={[
              {
                required: true,
                message: '请选择',
              },
            ]}
          >
            <Radio.Group
              options={plainOptions}
              onChange={onChange1}
              value={value1}
            />
          </Form.Item>

          <Form.Item
            name="accessory"
            label="附件"
            // 以下两条是必须的
            valuePropName="fileList"
            // 如果没有下面这一句会报错
            getValueFromEvent={normFile}
          >
            <Upload {...props1}>
              <Button icon={<UploadOutlined />}>Click to Upload</Button>
            </Upload>
          </Form.Item>
        </Form>
      </div>
      <div className="all-btn">
        <div className="first-btn" onClick={lastClick}>
          上一步
        </div>
        <div className="first-btn1" onClick={saveClick}>
          保存草稿
        </div>
        <div className="first-btn1">取消</div>
      </div>
    </div>
  );
}
